<template>
  <div id="CreativeTagsSelect" style="padding: 0">
    <div class="warp-scoll">
      <div class="header">
        <h5>已选标签组、标签</h5>
        <el-tag v-for="(it,i) in tagsSnapshot" :key="i" closable
                style="margin-left: 5px;margin-top: 5px" :type="parentId === it.id? 'warning':'info'"
                @close="handleTagGroupClose(i,it)" @mouseenter.native="handleEnterGroup(it)"
                @mouseleave.native="handleLeaveGroup">
          {{ it.name }}
        </el-tag>
        <div>
          <h5>标签</h5>
          <el-tag v-for="(it,i) in selectTags" :key="i" closable
                  style="margin-left: 5px;margin-top: 5px"
                  :type="groupChildren.includes(it.id)||it.id === childId?'warning': 'info'"
                  @close="handleTagClose(i,it)" @mouseenter.native="handleEnterTags(it)"
                  @mouseleave.native="handleLeaveTags">
            {{ it.name }}
          </el-tag>
        </div>
      </div>
      <div class="body">
        <div class="body-left">
          <div class="body-title">标签分组</div>
          <div class="tree-box" style="overflow: auto">
            <el-tree ref="tagTree" :data="treedata" :props="defaultProps" class="tree" node-key='id'
                     @node-click="handleNodeClick">

              <template v-slot="{ node, data }">
                <span v-if="getTagsNum(data) === 0">{{ node.label }}</span>
                <el-badge v-else :value="getTagsNum(data)" type="primary">
                  <span>{{ node.label }}</span>
                </el-badge>
                <!--<div>-->
                <!--   <span class="tree-tag">{{ getTagsNum(data) }}</span>-->
                <!--</div>-->
                <!--<el-button @click="node">点击</el-button>-->
              </template>
            </el-tree>
          </div>
        </div>
        <div class="body-right">
          <div class="body-title">标签</div>
          <div class="body-right-path">
            <span>当前路径：</span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :key='index' v-for="(item,index) in tagsPath"><span
                style="cursor: pointer">{{ item.label }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="body-right-content" style="overflow: auto">
            <div class="body-right-content-item" v-for="(item,i) in tags" :key="i">
              <div style=" width: 300px;height: 50px; display: flex">
                <el-checkbox v-model="item.check" :disabled="item.disabled" style="margin: auto;"
                             @change="checkTagChange(i,item)"></el-checkbox>
                <div
                  style="margin: auto; width: 250px; height: 50px; border: 1px solid #eee; display: flex; border-radius: 5px">
                  <p style="font-size: 14px;margin: auto">{{ item.name }}</p>

                  <!--                <el-checkbox :checked="item.flag==1" label="2" style="margin: auto" @change="tagsFlagChange($event,item)">生成素材</el-checkbox>-->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-button type="primary" size="medium" @click="clickTagsSave">
        保存
      </el-button>
      <el-button size="medium" @click="closed()">
        取消
      </el-button>
    </div>
  </div>
</template>
<script>
//素材标签选择
import {deepClone} from "@/util/util";


export default {
  name: "CreativeTagsSelect",
  props: {
    treedata: {
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    },
    selectTags: {
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    },
    tagsSnapshot: {
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    treedata: {
      handler(val, oldVal) {
        console.log('handler');
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      tagTree: null,
      tags: [],
      defaultProps: {
        children: 'groups',
        label: 'name'
      },
      tagsPath: [],
      // 选中标签颜色改变
      groupChildren: [],
      parentId: '',
      childId: ''
    }
  },
  mounted() {
    //this.selectTags = [];
  },
  computed: {},
  methods: {
    handleNodeClick(nodeData, node, c) {
      this.tagsPath = []
      this.getBreadcrumb(node)
      this.tagsPath.shift()
      this.tags = nodeData.tags;
      if (this.tags && this.tags.length > 0) {
        this.tags.forEach(item => {
          // item.id = node.id;
          item.type = nodeData.type;
          if ('check' in item === false) {
            item.check = false;
          }
          if (item.name === '短ID') {
            // item.check = true;
            // item.disabled = true;
          }
        })

      }

    },
    // 生成面包屑导航
    getBreadcrumb(parent) {
      if (parent.parent !== null) {
        this.tagsPath.unshift(parent)
        this.getBreadcrumb(parent.parent)
      } else {
        this.tagsPath.unshift(parent)
      }
    },
    handleTagClose(index, tag) {
      tag.check = false;
      // console.log(index, tag)
      // // id ,数组的那个id 设置状态为未选择
      // this.selectTags.splice(index, 1)
      // let tempNode = this.$refs['tagTree'].getNode(tag.nodeId);
      // if (tempNode != null) {
      //   let tagsTemp = tempNode.data.tags;
      //   if (tagsTemp && tagsTemp.length > 0) {
      //     tagsTemp.forEach(item => {
      //       if (item.id === tag.id) {
      //         item.check = false;
      //         return;
      //       }
      //     })
      //   }
      // }
      this.checkTagChange(index, tag);

    },
    handleTagGroupClose(index, node) {
      console.log(node)
      node.tags.map(item => {
        item.check = false;
        this.selectTags.forEach((tag, i) => {
          if (tag.id === item.id) {
            this.selectTags.splice(i, 1);
          }
        });
      });
      this.tagsSnapshot.splice(index, 1);
    },
    getNodeById(rootNode, Id) {
      let result = null;

      function temp(node) {
        // debugger
        let childNodes = node.childNodes;
        for (let i = 0, len = childNodes.length; i < len; i++) {
          let __childNodes = childNodes[i];
          if (__childNodes.id === Id) {
            result = __childNodes;
            return
          }
          if (__childNodes.childNodes && __childNodes.childNodes.length > 0) {
            temp(__childNodes);
          }
        }
      }

      temp(rootNode)
      return result;

    },
    checkTagChange(index, tag) {
      if (tag.check) {
        if (tag.name === "短ID") {
          this.selectTags.unshift(tag);
        } else {
          this.selectTags.push(tag);
        }
      } else {
        this.selectTags.forEach((item, i) => {
          if (item.id === tag.id) {
            this.selectTags.splice(i, 1)
          }
        })
      }

      let parentNode = this.$refs['tagTree'].getNode(tag.nodeId);
      let node;
      let hasNode = false;
      this.tagsSnapshot.forEach((item, i) => {
        if (item.id === parentNode.data.id) {
          node = item;
          hasNode = true;
        }
      });
      if (!hasNode) {
        node = deepClone(parentNode.data);
        if (tag.name === "短ID") {
          this.tagsSnapshot.unshift(node)
        } else {
          this.tagsSnapshot.push(node)
        }

      }

      if ('tags' in parentNode.data) {
        let tags = [];
        parentNode.data.tags.map(tagItem => {
          if (tagItem.check) {
            tags.push(tagItem);
          }
        })
        if (tags.length > 0) {
          node.tags = tags;
        } else {
          this.tagsSnapshot.forEach((item, i) => {
            if (item.id === node.id) {
              this.tagsSnapshot.splice(i, 1);
            }
          });
        }
      }
    },
    //保存按钮
    clickTagsSave() {
      this.$emit('on-select', this.selectTags)

    },
    //生成素材名
    tagsFlagChange(check, item) {
      if (check) {
        item.flag = 1;
      } else {
        item.flag = 0;
      }
    },
    closed() {
      this.$emit("on-closed")
    },
    // 获取标签树-marco
    getTagsNum(data) {
      let count = 0
      if (data.hasOwnProperty('tags') && data.tags.length > 0) {
        data.tags.forEach(item => {
          if (item.check) {
            count++
          }
        })
      }
      return count
    },
    handleEnterGroup(item) {
      console.log(item)
      this.parentId = item.id
      this.groupChildren = item.tags.map(i => i.id)
    },
    handleLeaveGroup() {
      this.groupChildren = []
      this.parentId = ''

    },
    handleEnterTags(item) {
      console.log(item) // 1678700901769
      this.parentId = item.nodeId
      this.childId = item.id
    },
    handleLeaveTags() {
      this.parentId = ''
      this.childId = ''
    }
  }
}
</script>

<style scoped>
div {
  box-sizing: border-box;
}

.tree-container {
  overflow: hidden;
  height: 500px;
}

.tree /deep/ .el-tree-node {
  position: relative;
  padding-left: 0;
}

.tree /deep/ .el-tree-node__children {
  padding-left: 16px;
}

.tree /deep/ .el-tree-node :last-child:before {
  height: 12px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree /deep/ .el-tree-node:before {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
  border-left: 1px dashed #4386c6;
  bottom: 0px;
  height: 100%;
  top: 0px;
  width: 1px;
}

.tree /deep/ .el-tree-node:after {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
  border-top: 1px dashed #4386c6;
  height: 20px;
  top: 12px;
  width: 10px;
}
</style>
<style lang="scss" scoped>
#CreativeTagsSelect {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .warp-scoll {
    height: calc(100vh - 150px);
    overflow: auto;

    .header {
      margin-bottom: 10px;
    }

    .body {
      .body-title {
        padding: 17px 14px;
      }

      display: flex;

      .body-left {
        width: 273px;
        height: 60vh;
        border: 1px solid rgba(232, 232, 232, 100);
        border-radius: 5px;
        overflow: hidden;

        .tree-box {
          height: 100%;
          padding-bottom: 50px;

          ::v-deep .is-fixed {
            top: 1em;
            right: -1.5em;
          }
        }
      }

      .body-right {
        margin-left: 20px;
        width: 469px;
        height: 60vh;
        border: 1px solid rgba(232, 232, 232, 100);
        border-radius: 5px;
        overflow: hidden;

        .body-right-path {
          display: flex;
          align-items: center;
          padding-left: 17px;
        }

        .body-right-content {
          height: 100%;
          padding-bottom: 80px;

          .body-right-content-item {
            padding: 10px 23px;
          }
        }
      }
    }
  }

  .bottom {
    text-align: center;
    height: 50px;
    line-height: 50px;
  }

}
</style>
